<template>
  <el-drawer
    title="人员详情"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    size="30%"
    destroy-on-close
  >
    <div v-if="personnelData" class="personnel-detail">
      <el-descriptions
        title="基本信息"
        :column="1"
        border
        direction="vertical"
        class="margin-bottom"
      >
        <el-descriptions-item label="人员编码">
          {{ personnelData.personnelCode || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="人员姓名">
          {{ personnelData.personnelName || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="所属供应商">
          {{ personnelData.supplierName || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="级别">
          {{ personnelData.levelName || "-" }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="订单关联信息" :column="1" border direction="vertical">
        <el-descriptions-item label="开始日期">
          {{ personnelData.startDate || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="结束日期">
          {{ personnelData.endDate || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="人月单价">
          {{ personnelData.monthlyRate ? `${personnelData.monthlyRate.toFixed(2)}元/月` : "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <status-tag :status="personnelData.status" :status-name="personnelData.statusName" />
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ personnelData.remark || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ personnelData.createTime || "-" }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="action-buttons">
        <el-button v-if="personnelData.status === '0'" type="danger" @click="handleRemovePersonnel">
          解除关联
        </el-button>
      </div>
    </div>
    <el-empty v-else description="暂无人员信息" />
  </el-drawer>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import StatusTag from "@/components/StatusTag/index.vue";
import { removeOrderPersonnel } from "@/api/attendance/orderPersonnel";
import type { OrderPersonnelVO } from "@/types/attendance/order/personnelRelation";

export default defineComponent({
  name: "PersonnelDetail",
  components: {
    StatusTag
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    personnelData: {
      type: Object as PropType<OrderPersonnelVO | null>,
      default: null
    }
  },
  emits: ["update:visible", "refresh"],
  setup(props, { emit }) {
    // 解除人员关联
    const handleRemovePersonnel = () => {
      if (!props.personnelData) return;

      ElMessageBox.confirm(
        `确定要解除对 "${props.personnelData.personnelName}" 的关联吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          try {
            await removeOrderPersonnel(props.personnelData!.id);
            ElMessage.success("解除关联成功");
            emit("update:visible", false);
            emit("refresh");
          } catch (error) {
            console.error("解除关联失败:", error);
            ElMessage.error("操作失败，请重试");
          }
        })
        .catch(() => {
          // 用户取消操作
        });
    };

    return {
      handleRemovePersonnel
    };
  }
});
</script>

<style scoped>
.personnel-detail {
  padding: 10px;
}

.margin-bottom {
  margin-bottom: 20px;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
